//修改绑定手机号弹窗

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col, Steps, message } from 'antd';
import { getCode } from '@/services/user';
import { mobile } from '@/utils/rule';
import { getDifferUserDetails, setDifferUserDetails } from '@/utils/authority';
import { verificationCode, changePhone } from '../../service';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import styles from './PhoneNmberModal.module.less';
const { Step } = Steps;

let personageMessage = getDifferUserDetails();
export default ({ phoneModalSwitch, phoneModalOk, phoneModalNo, pageInit }) => {

    useEffect(() => {
        // dispatch({ type: 'accountSafety/getInitPage' });
        if (phoneModalSwitch) {
            form.resetFields();
        }
    }, [phoneModalSwitch])

    const layout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 16,
        },
    };

    const [form] = Form.useForm();
    //步骤条
    const [current, setCurrent] = useState(0)

    //验证码妙数
    const [second, setSecond] = useState(0)
    const [secondTwo, setSecondTow] = useState(0)
    const [spinning, setSpinning] = useState(false)

    //获取验证码
    const code = async (phone) => {
        const res = await getCode({
            mobile: phone,
            type: 5
        })
        if (res.success) {
            message.success('验证码发送成功！');
        }
    }

    //获取验证码点击校验倒数事件
    const verification = async () => {
        let num = 59
        setSecond(59)
        let seconds = setInterval(() => {
            num = num - 1
            setSecond(num)
            if (num === 0) {
                clearInterval(seconds);
                setSecond(0);
            }
        }, 1000)
        code(personageMessage.mobile)
    }

    //获取验证码点击校验倒数事件第二步
    const verificationTwo = async () => {

        form.validateFields(['newPhoneNumber']).then((value) => {
            let num = 59
            setSecondTow(59)
            let seconds = setInterval(() => {
                num = num - 1
                setSecondTow(num)
                if (num === 0) {
                    clearInterval(seconds);
                    setSecondTow(0);
                }
            }, 1000)
            code(value.newPhoneNumber)
        }).catch(() => {

        })
    }

    //更改绑定手机号的提交校验通过下一步
    const onFinishChange1 = () => {
        form.validateFields().then(async (val) => {
            val.phone = personageMessage.mobile
            val.type = '5'
            setSpinning(true)
            const res = await verificationCode(val)
            if (res.code == 200) {
                setCurrent(1)
                setSpinning(false)
            } else {
                setSpinning(false)
            }
        }).catch(() => {

        })
    };

    //更改绑定手机号的提交校验通过确认
    const onFinishChange2 = () => {
        form.validateFields().then(async (val) => {
            // val.newMobile = personageMessage.mobile
            // val.type = '5'
            let obj = {}
            obj.newMobile = val.newPhoneNumber
            obj.oldMobile = personageMessage.mobile
            obj.smsCode = val.newCode
            setSpinning(true)
            const res = await changePhone(obj)
            if (res.code == 200) {
                setSpinning(false)
                setCurrent(0)
                personageMessage = {
                  ...personageMessage, 
                  mobile: val.newPhoneNumber
                }
                setDifferUserDetails(personageMessage);
                message.success('手机更改成功')
                form.resetFields()
                phoneModalOk()
                pageInit()
            } else {
                setSpinning(false)
            }
            let timer = setTimeout(() => {
                setSpinning(false);
                clearTimeout(timer);
                timer = null;
            }, 300)
        }).catch(() => {

        })
    };

    //弹框取消按钮
    const phoneModalCancel = () => {
        phoneModalNo()
        setCurrent(0)
        form.resetFields()
    }

    return (
        <CommonModal
            title="修改绑定手机号"
            visible={phoneModalSwitch}
            onCancel={phoneModalCancel}
            footer={
                current == 0 ?
                    [<Button key={1} onClick={phoneModalCancel} loading={spinning}>取消</Button>, <Button key={2} type="primary" onClick={onFinishChange1} loading={spinning}>下一步</Button>] :
                    [<Button key={1} onClick={phoneModalCancel} loading={spinning}>取消</Button>, <Button key={2} type="primary" onClick={onFinishChange2} loading={spinning}>确定</Button>]
            }
        >
            <Steps current={current}>
                <Step title="绑定手机验证" />
                <Step title="修改绑定手机" />
            </Steps>

            <div className={styles.form_box}>
                <Form
                    {...layout}
                    name="phone-number"
                    form={form}
                    // hideRequiredMark={true}
                    initialValues={{
                        phone: personageMessage.mobile,
                    }}
                >
                    {current == 0 ?
                        <div>
                            <Form.Item
                                label="手机号"
                                name="phone"
                            // rules={[
                            //     {
                            //         required: true,
                            //         message: '请输入正确的手机号!',
                            //     },
                            // ]}
                            >
                                <Input style={{ width: 342 }} disabled />
                            </Form.Item>

                            <Form.Item
                                label="手机验证"
                                name="code"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入手机验证码!',
                                    },
                                ]}
                            >
                                <Row gutter={8}>
                                    <Col span={12}>
                                        {/* <Form.Item
                                                name="code"
                                                noStyle
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: '请输入手机验证码!',
                                                    },
                                                ]}
                                            > */}
                                        <Input />
                                        {/* </Form.Item> */}
                                    </Col>
                                    <Col span={12}>
                                        <Button style={{ width: '145px' }} disabled={second} onClick={verification}>{second ? `${second}s` : '获取验证码'}</Button>
                                    </Col>
                                </Row>
                            </Form.Item>
                        </div> :
                        <div>
                            <Form.Item
                                label="新手机号"
                                name="newPhoneNumber"
                                rules={[
                                    mobile,
                                    {
                                        required: true,
                                        message: '请输入正确的手机号!',
                                    },
                                ]}
                            >
                                <Input style={{ width: 342 }}/>
                            </Form.Item>

                            <Form.Item
                                label="手机验证"
                                name="newCode"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入正确的手机验证码!',
                                    },
                                ]}
                            >
                                <Row gutter={8}>
                                    <Col span={14}>
                                        {/* <Form.Item
                                                name="newCode"
                                                noStyle
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: '请输入正确的手机验证码!',
                                                    },
                                                ]}
                                            > */}
                                        <Input />
                                        {/* </Form.Item> */}
                                    </Col>
                                    <Col span={8}>
                                        <Button style={{ width: '185px' }} disabled={secondTwo} onClick={verificationTwo}>{secondTwo ? `${secondTwo}s` : '获取验证码'}</Button>
                                    </Col>
                                </Row>
                            </Form.Item>
                        </div>
                    }
                </Form>
            </div>
            <CommonLoading loading={spinning} />
        </CommonModal>
    )

}